Page({
  data: {
    width: 400,
    item: {
      curtemp: 50
    }
  },
  onLoad: function () {
    this.drawCircle(this.data.item, this)
  },
  drawCircle(item, that) {
    let width = that.data.width * 0.7;
    let height = that.data.width * 0.7;

    let centerPoint = {
      x: width / 2,
      y: height / 2
    }

    let ctx = wx.createCanvasContext('circle');

    ctx.save();
    ctx.translate(width / 2, height / 2);
    
    let each = 3;
    let len = 270 / each;
    let bili = 100 / 6 / 45;

    let line = 30;
    let offset = 10;

    let smallCircleWidth = 1.5;
    let offsetCircle = 10;

    let astart = 163;
    let bstart = 169;
    let cstart = 155;

    let aend = 255;
    let bend = 234;
    let cend = 1;

    let aeach = (aend - astart) / len;
    let beach = (bend - bstart) / len;
    let ceach = (cend - cstart) / len;

    console.log(aeach)
    console.log(beach)
    console.log(ceach)


    ctx.rotate(45 * Math.PI / 180);
    console.log(45 * Math.PI / 180)
    
    if (!item.curtemp) {
      item.curtemp = 125;
    }

    let pre = parseInt(item.curtemp / bili / each);

    ctx.setLineWidth(2);
    for (let i = 0; i < len; i++) {
      if (i > pre) {
        ctx.setStrokeStyle("#404040");
      } else {
        ctx.setStrokeStyle("rgb(" + (astart + i * aeach) + "," + (bstart + i * beach) + "," + (cstart + i * ceach) + ")");
      }
      ctx.beginPath();
      let point = {
        x: 0,
        y: centerPoint.y
      }
      let arrivePoint = {
        x: 0,
        y: point.y - line
      }
      if (i == len / 2) {
        point.y = centerPoint.y;
      } else {
        point.y = centerPoint.y - offset;
      }
      ctx.moveTo(point.x, point.y);
      ctx.lineTo(arrivePoint.x, arrivePoint.y);
      ctx.stroke();

      ctx.setFillStyle("#404040");
      ctx.beginPath();
      ctx.arc(arrivePoint.x, arrivePoint.y - offsetCircle - smallCircleWidth, smallCircleWidth, 0, Math.PI * 2);
      ctx.fill();

      ctx.rotate(each * Math.PI / 180);
    }

    ctx.restore();

    //画字
    let value = (item.curtemp + "") || "125";
    let centerFontSize = 50;
    ctx.setFontSize(centerFontSize);
    ctx.setTextAlign("center");
    ctx.setTextBaseline("middle");
    ctx.setFillStyle("#fef200");
    ctx.fillText(value, centerPoint.x, centerPoint.y);

    //画单位
    let unitFontSize = 15;
    ctx.setFontSize(unitFontSize);
    ctx.setTextAlign("left");
    ctx.setTextBaseline("top");
    ctx.setFillStyle("#fef200");
    ctx.fillText("%", centerPoint.x + (value.length * centerFontSize / 3.5), centerPoint.y);

    unitFontSize = 10;
    ctx.setTextAlign("center");
    ctx.setTextBaseline("middle");
    ctx.setFillStyle("#404040");

    ctx.setFontSize(unitFontSize);
    ctx.fillText(parseInt(bili * 42 + ""), line + offset + offsetCircle + smallCircleWidth * 2, centerPoint.y);
    console.log()
    console.log(bili * 45 + "", line + offset + offsetCircle + smallCircleWidth * 2, centerPoint.y)

    ctx.setFontSize(unitFontSize);
    ctx.fillText(parseInt(bili * 135 + ""), centerPoint.x, line + offset + offsetCircle + smallCircleWidth * 2);
    console.log(bili * 135 + "", centerPoint.x, line + offset + offsetCircle + smallCircleWidth * 2)

    ctx.setFontSize(unitFontSize);
    ctx.fillText(parseInt(bili * 230 + ""), centerPoint.x * 2 - (line + offset + offsetCircle + smallCircleWidth * 2), centerPoint.y);
    console.log(bili * 225 + "", centerPoint.x * 2 - (line + offset + offsetCircle + smallCircleWidth * 2), centerPoint.y)

    //画开启中
    let stateStr = "未开启";
    if (item.state) {
      ctx.setFillStyle("rgba(0,168,255,1)");
      stateStr = "开启中";
    }

    ctx.setFontSize(15);
    ctx.setTextAlign("center");
    ctx.setTextBaseline("top");
    // ctx.fillText(stateStr, centerPoint.x, centerPoint.y + centerFontSize / 2);


    ctx.draw();

  }
})